<template>
    <el-card class="box-card" shadow="hover">
            <el-button type="primary" :icon="Plus" style="marginBottom: 10px;" @click="addTagFun">新增</el-button>
          <el-table :data="tagList.list" stripe style="width: 100%">
                <el-table-column prop="id" label="标签ID" width="180" />
                <el-table-column prop="name" label="分类名" width="180" />
                <el-table-column prop="time" label="发布时间" />
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <el-button
                                size="small"
                                type="danger"
                                 :icon="Delete" 
                                @click="delTagFun(scope.row.id)"
                                ></el-button
                            >
                        </div>
                    </template>
                </el-table-column>
            </el-table>
    </el-card>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import tagApi from '../../hooks/Tag/tagApiFun';
import tagAddApiFun from '../../hooks/Tag/tagAddApiFun';
import { ElLoading, ElMessage, ElMessageBox   } from 'element-plus';
import { Delete, Plus } from '@element-plus/icons-vue';

interface limitList {
    list: any
}

const GetApiUrl = '/books/getBooksClassIfy'

const DelApiUrl = '/books/delBooksClassify'

const AddApiUrl = '/books/addBooksClassIfy'

const tagList = reactive<limitList>({
    list: []
})

const getAllTagFun = async () => {
    const loading = ElLoading.service({
          lock: true,
          text: "Loading",
          fullscreen: false,
          background: "rgba(0, 0, 0, 0.7)",
      });
    try {
        const res:any = await tagApi(GetApiUrl);
        console.log(res)
        if (res.data.status !== 200) return ElMessage.error(res.data.message);
        tagList.list = res.data.data;
    } catch (e: any) {
        return ElMessage.error('获取失败');
    } finally {
        loading.close();
    }
}

const addTagFun = async () => {
    ElMessageBox.prompt('请输入书签分类', '分类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '书签分类',
    })
        .then(async ({ value }) => {
            const loading = ElLoading.service({
                lock: true,
                text: "Loading",
                fullscreen: false,
                background: "rgba(0, 0, 0, 0.7)",
            });
                try {
                    const res:any = await tagAddApiFun(AddApiUrl,{name: value});
                    console.log(res)
                    if (res.data.status !== 200) return ElMessage.error(res.data.message);
                    ElMessage.success('新增成功');
                    getAllTagFun();
                } catch (e: any) {
                    return ElMessage.error('获取失败');
                } finally {
                    loading.close();
                }
                })
            .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消了删除',
            })
            })  
        .catch(() => {
        ElMessage({
            type: 'info',
            message: '取消了输入',
        })
        })
}

const delTagFun = (id: string) => {
    ElMessageBox.confirm(
    '你真的要删除这个标签吗?',
    '删除',
    {
      confirmButtonText: '是的',
      cancelButtonText: '不是',
      type: 'warning',
    }
  )
    .then(async () => {
      const loading = ElLoading.service({
          lock: true,
          text: "Loading",
          fullscreen: false,
          background: "rgba(0, 0, 0, 0.7)",
      });
        try {
            const res:any = await tagApi(DelApiUrl + `/${id}`);
            console.log(res)
            if (res.data.status !== 200) return ElMessage.error(res.data.message);
            ElMessage.success('删除成功');
            getAllTagFun();
        } catch (e: any) {
            return ElMessage.error('获取失败');
        } finally {
            loading.close();
        }
        })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消了删除',
      })
    })  
}

getAllTagFun()

</script>
<style lang="scss" scoped>
@import './Tag.scss'
</style>